<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹幕</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elementui.js"></script>
    <script src="./js/moment.min.js"></script>
    <script src="./js/qrcode.js"> </script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/danmu.css">
    <link rel="stylesheet" href="./css/review.css">
    <link rel="stylesheet" href="./css/elementui.css">
    <link rel="stylesheet" type="text/css" href="./css/toastr.min.css">
    <script type="text/javascript" src="./js/toastr.min.js"></script>
    <style>
        #app{
            width: 100vw;
            height: 100vh;
            background: url('./../assets/userbg.png') no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }
        .logoWrap{
            height: 40vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .container{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 40vh;
            padding:60px;
        }
        .title{
            font-weight: bold;
            font-size: 30px;
            color:rgb(41,89,71);
            background-color: #fff;
            border-radius: 10px;
            padding:5px 30px;
        }
        .createcode{
            margin-top: 50px;
            background-color:rgb(41,89,71) ;
            border:0;
        }
        #qrcode{
            border:4px solid #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="logoWrap">
            <div class="title">弹幕系统</div>
        </div>
        <div class="container" id="input" v-if="!iscode">
            <el-input v-model="input" placeholder="请输入手机号"></el-input>
            <el-button type="primary" @click="createcode" class="createcode">生成二维码</el-button>
        </div>
        <div class="container" v-else>
            <div id="qrcode"></div>
            <el-button type="primary" @click="back" class="createcode">返回</el-button>
        </div>
    </div>
    <script>
       new Vue({
          el: '#app',
          data: {
            input:'',
            iscode:false,
          },
          mounted(){
           
          },
          methods:{
            createcode(){
                console.log(this.input)
                this.iscode = true;
                setTimeout(() => {
                    new QRCode(document.getElementById("qrcode"),window.location.origin+'/phone.html'+'?phone='+this.input);
                }, 200);
                

            },
            back(){
                this.iscode = true;
                this.input = '';
            }

          },

        });
    </script>
</body>
</html>